<template>
    <div class="log-body">
        <div class="log-logo">
            <h1>学成在线</h1>
        </div>
        <div class="log-slogan">
            <h1>用教育</h1>
            <h2>让世界变得更美好</h2>
        </div>
        <div class="log-help">
            <a href="#">帮助中心</a>&nbsp;&nbsp;&nbsp;
            <span>|</span>&nbsp;&nbsp;&nbsp;
            <a href="#">人工客服</a>
        </div>
        <div class="log-content">
            <div class="log-welcome">
                <h1>登录</h1>
                <p>
                    <span>没有账号?</span>
                    <router-link :to="{ name: 'register' }">点击注册</router-link>
                </p>
            </div>
            <div class="log-form">
                <label for="username">账 &nbsp;&nbsp;号</label> &nbsp; <input v-model="logInfo.username" id="username" type="text" placeholder="请输入您的手机号"><br>
                <label for="password">密 &nbsp;&nbsp;码</label> &nbsp; <input v-model="logInfo.password" id="password" type="password" placeholder="请输入您的密码"><br>
            </div>
            <div class="log-button">
                <input type="button" value="登录" @click="checkLogin">
            </div>
        </div>
    </div>
</template>

<style scoped>

    * {
        margin: 0;
        padding: 0;
    }

    .log-body {
        height: 1080px;
        background: url(../../public/pic/注册banner.jpg) no-repeat;
        background-size: cover;
    }

    a {
        color: #ffffff;
        text-decoration: none;
    }

    .log-logo {
        position: absolute;
        top: 80px;
        left: 100px;
        color: #ffffff;
        font-style: italic;
        font-size: 15px;
    }

    .log-slogan {
        position: absolute;
        top: 300px;
        left: 300px;
        color: #ffffff;
    }

    .log-slogan h1 {
        font-size: 50px;
    }

    .log-slogan h2 {
        font-size: 36px;
        font-weight: 400;
    }

    .log-help {
        position: absolute;
        bottom: 90px;
        left: 100px;
        font-size: 12px;
        color: #ffffff;
    }

    .log-content {
        background: rgba(255, 255, 255, .9);
        position: absolute;
        right: 150px;
        top: 45%;
        transform: translateY(-50%);
        border-radius: 2%;
        width: 480px;
        height: 480px;
    }

    .log-content>div {
        margin-left: 40px;
    }

    .log-content .log-welcome {
        margin-top: 60px;
    }

    .log-content .log-welcome h1 {
        font-size: 35px;
    }

    .log-content .log-welcome p {
        margin-top: 2px;
        font-size: 13px;
    }

    .log-content .log-welcome p span {
        color: #9b9b9b;
    }

    .log-content .log-welcome p a {
        color: #2e58ff;
    }

    .log-content .log-form {
        margin-top: 0px;
        overflow: hidden;
    }

    .log-content .log-form input{
        margin-top: 45px;
        text-indent: 10px;
        height: 40px;
        width: 345px;
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }

    .log-content .log-form button {
        margin-left: 10px;
        background-color: #fff;
        height: 40px;
        width: 125px;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .log-content .log-form input:hover {
        border: 1px solid #2e58ff;
        outline: 1px solid #2e58ff;
    }

    .log-content .log-form input::placeholder {
        font-size: 15px;
        opacity: .4;
    }

    .log-content .log-button {
        margin-top: 50px;
    }

    .log-content .log-button input {
        width: 400px;
        height: 50px;
        background-color: #3f89ec;
        color: #fff;
        font-weight: 550;
        font-size: 16px;
        border: none;
        outline: none;
        cursor: pointer;
    }

</style>

<script>

    import config from '../config.js'

    export default {
        data(){
            return {
                logInfo: {
                    username: '',
                    password: ''
                }
            }
        },
        created() {
            let token = localStorage.getItem('token')
            if(token && token !== '') {
                this.$http.post(config.baseURL+'users/jwtcheck', {token: token}).then( res => {
                    if(res.status === 200) {
                        if(res.data && res.data.code === 0) {
                            this.$router.push({ name: 'home' })
                        }
                    }
                })
            }
        },
        methods: {

            checkLogin() {
                this.$http.post(config.baseURL+'users/checklogin', this.logInfo).then( ({status, data}) => {
                    if(status === 200) {
                        if(data && data.code === 0) {
                            this.$message({
                                showClose: true,
                                message: '登录成功！',
                                type: 'success'
                            })
                            localStorage.setItem('token', data.token)
                            this.$store.commit('setUsername', data.user.username)
                            this.$router.push({ name: 'home' })
                        }
                        else {
                            this.$message({
                                showClose: true,
                                message: '账号密码错误！',
                                type: 'error'
                            })
                        }
                    }
                    else {
                        this.$message({
                                showClose: true,
                                message: '服务器出错！',
                                type: 'error'
                        })
                    }
                })
            }

        }
    }

</script>